<template>
    <detail-page
        :loading="loading"
        :reference="() => $refs"
        :anchors="anchors"
        :title="title"
        :description="headerDescription"
        :extra="headerExtra"
        :buttons="buttons"
        @close="close"
    >
        <abstract-form :model="form" :rules="rules">
            <collapse-card ref="progress" header="流程进度">
                <doc-steps :status="form.status" :finish="form.finish" :type="type"/>
            </collapse-card>

            <collapse-card ref="name" header="发布标题">
                <abstract-form-item label="名  称" prop="name">
                    <el-input
                    v-model="form.name"
                    :readonly="!canSave"
                    style="width: 800px;"
                    maxlength="100"
                    show-word-limit/>
                </abstract-form-item>
            </collapse-card>

            <collapse-card  header="类别">
                <abstract-form-item label="类型选择" prop="pname">
                    <el-input v-if="canSave" :value="form.pname" readonly>
                        <template v-slot:append>
                            <el-button @click="customerDialog=true">选择</el-button>
                        </template>
                    </el-input>
                    <template v-else>{{ form.pname }}</template>
                </abstract-form-item>
            </collapse-card>


            <collapse-card  header="公告内容编辑" >
                <mavon-editor
                    v-model="form.content"
                    ref=md
                    @imgAdd="$imgAdd"
                    @imgDel="$imgDel"
                    fontSize="16px">
                </mavon-editor>
            </collapse-card>

            <collapse-card  header="附件">
                <qiniu-upload
                    :file-list="form.imageList"
                    :disabled="!canSave"
                    @remove="removeUpload"
                    @success="uploadSuccess"
                />
            </collapse-card>

            <collapse-card  header="备注">
                <el-input
                    v-model="form.remark"
                    :rows="4"
                    :readonly="!canSave"
                    maxlength="200"
                    show-word-limit
                    type="textarea"
                />
            </collapse-card>

        </abstract-form>
        <type-selector v-model="customerDialog" @select="selecttype"/>
    </detail-page>
</template>

<script>
import docDetailMixin from "@/mixin/docDetailMixin"
import {getById, add, update, commit, pass} from "@/api/doc/notice/notice"
import TypeSelector from './component/TypeSelector'
import {uploadImg,autoCompleteUrl} from "@/util/file"
import {deleteUpload} from "@/api/file"

export default {
    name: "sellOrderDetail",

    components: {TypeSelector},

    mixins: [docDetailMixin],

    data() {
        this.docName = '公告'
        this.api = {getById, add, update, commit,pass}
        return {
            form: {
                id: null,
                name: null,
                pname: null,
                finish: 0,
                ftime: null,
                content: null
            },
            rules: {
                name: [{required: true, message: '公告标题不能为空', trigger: 'change'}],
                pname: [{required: true, message: '类型不能为空', trigger: 'change'}]

            },
            customerDialog: false
        }
    },

    computed: {
        headerDescription() {
            const f = this.$options.filters.timestamp2Date
            return [
                {label: '创建人：', content: this.form.cname},
                {label: '创建时间：', content: f(this.form.ctime)},
                {label: '审核人：', content: this.form.vname},
                {label: '审核时间：', content: f(this.form.vtime)},
                {label: '完成时间：', content: f(this.form.ftime)}
            ]
        },
        headerExtra() {
            return [
                {title: '单据状态', content: this.getStatus(this.form.status)},
                {title: '完成情况', content: this.getFinish(this.form.finish)}
            ]
        },
        selectedCategories() {
            return this.form.data.map(i => i.cid)
        },
        canAddSub() {
            return this.form.data.every(i => !i._editable)
        }
    },

    methods: {
        selecttype(row) {
            this.form.pid = row.id
            this.form.pname = row.name
            this.customerDialog = false
        },
        // validate() {
        //     if (this.type === 'edit' && isEmpty(this.form.id)) {
        //         return '属性缺失，请关闭弹窗刷新重试'
        //     }
        //     let index = 1
        //     for (let sub of this.form.data) {
        //         if (isEmpty(sub.cid, sub.cname)) return `第${index}个商品分类不能为空`
        //         if (isEmpty(sub.num)) return `第${index}个商品数量不能为空`
        //         if (isEmpty(sub.price)) return `第${index + 1}个商品单价不能为空`
        //         if (!isInteger(sub.num) || sub.num < 0) return `第${index}个商品数量有误`
        //         if (!isInteger(sub.price) || sub.price <= 0) return `第${index}个商品单价有误`
        //         this.form.total = plus(this.form.total, mul(sub.num, sub.price))
        //         index++
        //     }
        //     return null
        // },

        $imgAdd (pos, $file) {
            // 第一步.将图片上传到服务器.
            uploadImg($file).then((res) => {
                let url=autoCompleteUrl("a.jpg")
                this.$refs.md.$img2Url(pos, url)
            })
        },

        $imgDel (pos) {
            deleteUpload(pos)
        }
    }
}
</script>
